openPlayHall
<template>
  <div class="ranking-list">
    <h2>陪玩排行榜</h2>

    <!-- 表格 -->
    <el-table :data="paginatedData" style="width: 100%" border>
      <el-table-column prop="id" label="ID" sortable width="80" />
      <el-table-column prop="playmateAvatar" label="头像" width="100">
        <template #default="{ row }">
          <img :src="row.playmateAvatar" alt="头像" width="40" height="40" />
        </template>
      </el-table-column>
      <el-table-column prop="playmateNickname" label="昵称" sortable />
      <el-table-column prop="playmateSex" label="性别" sortable width="80">
        <template #default="{ row }">
          {{ row.playmateSex === 0 ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="playmateRating"
        label="平均评分"
        sortable
        width="100"
      >
        <template #default="{ row }">
          <el-rate
            v-model="row.playmateRating"
            disabled
            show-score
            score-template="{value}"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="playmateGameTime"
        label="游戏时长"
        sortable
        width="120"
      >
        <template #default="{ row }">
          {{ row.playmateGameTime }} 小时
        </template>
      </el-table-column>
      <el-table-column prop="playmateDesc" label="自我介绍" />
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataList.length"
      />
    </div>
  </div>
</template>

<script>
import bossApi from "@/http/bossApi";

export default {
  name: "RankingList",
  data() {
    return {
      dataList: [],
      sortKey: "",
      sortDir: "asc",
      currentPage: 1,
      pageSize: 10,
      tenantId: 1,
    };
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.dataList;
      return [...this.dataList].sort((a, b) => {
        const aValue = a[this.sortKey];
        const bValue = b[this.sortKey];

        if (aValue < bValue) return this.sortDir === "asc" ? -1 : 1;
        if (aValue > bValue) return this.sortDir === "asc" ? 1 : -1;
        return 0;
      });
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.sortedData.slice(start, end);
    },
    totalPage() {
      return Math.ceil(this.dataList.length / this.pageSize);
    },
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortDir = this.sortDir === "asc" ? "desc" : "asc";
      } else {
        this.sortKey = key;
        this.sortDir = "asc";
      }
      // 重置为第一页
      this.currentPage = 1;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getAllPlaymates() {
      bossApi
        .getAllPlaymates({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          tenantId: this.tenantId,
        })
        .then((res) => {
          console.log(res);
          this.dataList = res.data;
        });
    },
  },
  created() {
    this.getAllPlaymates();
  },
};
</script>

<style scoped>
.ranking-list {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.sort-controls {
  margin: 10px 0;
}

.sort-controls button {
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #f0f0f0;
}

.sort-controls button:hover {
  background: #e0e0e0;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.ranking-table th,
.ranking-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.ranking-table th {
  background-color: #f4f4f4;
  cursor: pointer;
}

.ranking-table th:hover {
  background-color: #e0e0e0;
}

.ranking-table tr:hover {
  background-color: #f9f9f9;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
